<template>
	<view class="box">
		<view class="top">
			<u-navbar height="50" :is-back="true" title="商家店铺" :border-bottom="false" title-color="#333"
				title-size="36"></u-navbar>
		</view>
		<!-- 商家信息 -->
		<view class="business-info">
			<view class="left">
				<image :src="store.logo" mode="widthFix" style="width: 150rpx; height: 150rpx;"></image>
			</view>
			<view class="right">
				<view class="name">
					<span>{{store.name}}</span> 
				</view>
				<view class="hours">
					<!-- <span>营业时间: 9:00~22:00</span> -->
					<span class="ing" v-if="store.mch_type==1">零售商户</span>
					<span class="ing" v-if="store.mch_type==2">食品商户</span>
				</view>
				<view class="address">
					<view style="display: flex;align-items: center;">
						<text class="ct">{{store.zone}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 商家介绍 -->
		<view class="tabs">
			<view class="goods ct" v-for="(item,index) in tabs" :key="index" :class="{active:selectTab==item.id}"
				@click="select(item.id)">
				{{item.name}}
			</view>
		</view>
		<!-- 展示内容 -->
		<view class="tabCt">
			<!-- 商家简介 -->
			<view class="introduce" v-if="selectTab==2">
				<view class="photos">
					<view class="title">
						营业执照
					</view>
					<view class="picS">
						<view class="pic">
							<image :src="store.license" mode="widthFix"
								style="width: 300rpx; height: 300rpx; border-radius: 20rpx;">
							</image>
						</view>
					</view>
				</view>
				<view class="dotts">

				</view>
				<!-- <view class="introduceCt">
					<view class="title">
						商家介绍
					</view>
					<view class="ct">
						商家店铺名称商家店铺介绍商家店铺名称商家店铺介绍，商
						家店铺名称商家店铺介绍，商家店铺名称商家店铺介绍商家
						店铺名称商家店铺介绍。
					</view>
				</view> -->
			</view>
			<!-- 商品-->
			<view class="goodsCt" v-if="selectTab==1">
				<view class="showGoods">
					<view class="item" v-for="item in goodsList" :key="item.id"
						@click="lookDetail(`/pages/goods-details/goods-details?id=`,item.id)">
						<view class="pic">
							<image :src="item.images_format[0]" mode=""></image>
						</view>
						<view class="ct">
							<h2 class="title">{{item.name}}</h2>

							<view class="num_box">
								<span style="color: #FA453C; font-size: 36rpx;">￥{{item.price}}</span> <span
									style="color: #999;font-size: 24rpx; margin-left: 20rpx;">销量{{item.sale_count}}</span>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 展示商品 -->

	</view>
</template>

<script>
	import {
		getStoreInfo,
		getStoreGoodsList
	} from '../../api/store.js'
	export default {
		data() {
			return {
				storid: 0,
				tabs: [{
						id: 1,
						name: "商品"
					},
					{
						id: 2,
						name: "简介"
					}
				],
				picS: [1, 2, 3, 4],
				selectTab: 1,
				goodsList: [],
				store: [],
			};
		},
		onLoad(option) {
			
			this.storid = option.id

			getStoreInfo(this.storid).then((res) => {
				this.store = res.data
			})
			
			getStoreGoodsList({
				id: this.storid
			}).then((res) => {
				this.goodsList = res.data
				uni.switchTab({
					
				})
			})
		},
		methods: {
			select(id) {
				this.selectTab = id
			},
			lookDetail(url, id) {

				let urls = url + id
				console.log(urls);
				uni.navigateTo({
					url: urls
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #f5f5f5;
	}

	// 商家信息
	.business-info {
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;
		background-color: #fff;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			width: 150rpx;
			height: 150rpx;
			border-radius: 20rpx;
			overflow: hidden;

		}

		.right {
			width: 540rpx;
			height: 150rpx;

			.name {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
			}

			.name .phone_icon {
				display: block;
				width: 32rpx;
				height: 32rpx;
				background-image: url('/static/icons/lxwm.png');
				background-size: cover;
				background-repeat: no-repeat;
			}

			.hours {
				display: flex;
				align-items: center;
				height: 50rpx;
				font-size: 24rpx;
			}

			.hours .ing {
				display: block;
				// width: 90rpx;
				padding: 0 10rpx;
				height: 36rpx;
				background: #6BC665;
				border-radius: 18rpx;
				text-align: center;
				line-height: 36rpx;
				color: #fff;
				margin: 0 8rpx;
			}

			.address {
				display: flex;
				justify-content: space-between;
				height: 50rpx;
				align-items: center;
			}

			.address .dw_icon {
				display: block;
				width: 20rpx;
				height: 20rpx;
				background-image: url('/static/icon/dwei.png');
				background-size: cover;
				background-repeat: no-repeat;
				margin: 0 8rpx 0 0;
			}

			.address .ct {
				display: block;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 24rpx;
				color: #999999;
			}

			.address .dh_icon {
				display: block;
				width: 34rpx;
				height: 30rpx;
				background-image: url('/static/dhd.png');
				background-size: cover;
				background-repeat: no-repeat;
			}

		}

	}

	// tab
	.tabs {
		width: 750rpx;
		height: 80rpx;
		background: #FFFFFF;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;

		.ct {
			width: 375rpx;
			box-sizing: border-box;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
		}

		.ct.active {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}
	}

	.introduce {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx auto;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;

		.photos .title {
			margin: 20rpx 0;
			font-size: 32rpx;
			color: #333;
		}


		.photos .picS {
			display: flex;
			overflow-x: auto;

			&::-webkit-scrollbar {
				display: none
			}
		}

		.pic {
			width: 300rpx;
			height: 300rpx;
			margin-right: 20rpx;
		}

		.dotts {
			width: 670rpx;
			height: 1rpx;
			background: #E6E6E6;
		}

		.introduceCt {
			.title {
				margin: 20rpx 0;
				font-size: 32rpx;
				color: #333;
			}

			.ct {
				color: #666666;
				line-height: 48rpx;
			}
		}
	}

	// 商品
	//商品展示
	.showGoods {
		width: 710rpx;
		margin: 20rpx 20rpx 100rpx 20rpx;
		display: flex;
		justify-content: space-between;
		font-family: Source Han Sans CN;
		flex-wrap: wrap;

		.item {
			width: 345rpx;
			border-radius: 10rpx;
			overflow: hidden;
			margin-top: 40rpx;
			background-color: #ffffff;

			.pic image {
				width: 345rpx;
				height: 345rpx;
			}

			.ct .title {
				width: 278rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				margin: 10rpx;
			}

			.ct .num_box {
				display: flex;
				margin: 10rpx;
				align-items: center;
				justify-content: space-between;
			}

		}
	}
</style>